import React, { Component } from 'react'
// HashRouter    ===> vue  ===> hash
// BrowserRouter ===> vue  ===> history
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'

// import Home from './views/home'
// import Kind from './views/kind'
// import Cart from './views/cart'
// import User from './views/user'
// import Detail from './views/detail'
import Footer from './components/Footer'

import './style.scss'
import NotFound from './views/404'

const Home = React.lazy(() => import('./views/home'))
const Kind = React.lazy(() => import('./views/kind'))
const Cart = React.lazy(() => import('./views/cart'))
const User = React.lazy(() => import('./views/user'))
const Detail = React.lazy(() => import('./views/detail'))

// Router 组件只能写一次，写到顶级即可
// 组件的jsx内部需要使用路由的地方，通过Route组件定义路由
export default class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <React.Suspense fallback={ <div>加载中。。。。</div> }>
            <Switch>
              {/* 定义路由 - 三种定义路由的方式 */}
              {/* component 形式 */}
              <Route path="/home" component = { Home } />
              {/* children 形式 */}
              <Route path="/kind">
                <Kind />
              </Route>
              {/* render 形式 */}
              <Route path="/cart" render={ () => {
                return <Cart />
              }} />
              <Route path="/user" component = { User } />
              {/* 动态路由传参 */}
              <Route path="/detail/:proid" ><Detail /></Route>
              <Redirect exact path="/" to="/home" />
              <Route component = { NotFound } />
            </Switch>
          </React.Suspense>
          
          
          {/* Footer 组件抽离 */}
          <Route path="/home" component = { Footer } />
          <Route path="/kind" component = { Footer } />
          <Route path="/cart" component = { Footer } />
          <Route path="/user" component = { Footer } />
          <div className="tip">请将屏幕竖向浏览</div>
        </div>
      </Router>
    )
  }
}
